import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Radio, Tag } from "antd";
import Col from "antd/es/grid/col";
import Row from "antd/es/grid/row";
import { RadioChangeEvent } from "antd/es/radio";
import * as React from "react";
import { listOne } from "../type/CommonData";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    contantMargin: {
      marginTop: "6px",
      marginBottom: "6px",
      "& .ant-radio-button-wrapper:not(:first-child)::before": {
        backgroundColor: "#fafafa"
      }
    },
    fontLeft: {
      fontSize: "14px"
    },
    fontRight: {
      fontSize: "14px",
      color: "#1990ff"
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  filterParam: listOne[];
  filterTitle: string;
  valueCallback: (value: string | null) => void;
}
interface IState {
  filterValue: string;
  tag: boolean;
}
/**
 * 医院或者以上筛选条件的组件
 *
 * @property FilterParam : 传入筛选条件参数组
 * @property filterTitle : 筛选的标题
 */
class FilterHurdle extends React.Component<Iprops, IState> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      filterValue: "",
      tag: false
    };
  }
  public filtrateDo = (e: RadioChangeEvent) => {
    this.setState({
      filterValue: e.target.value,
      tag: true
    });
    this.props.valueCallback(e.target.value);
  };
  public cleanFilter = () => {
    this.setState({
      filterValue: "",
      tag: false
    });
    this.props.valueCallback(null);
  };
  public tagState = (value: boolean): any => {
    if (value) {
      return (
        <Tag closable={true} onClose={this.cleanFilter}>
          清除
        </Tag>
      );
    } else {
      return " ";
    }
  };
  public render() {
    const { classes } = this.props;
    const radioCss: React.CSSProperties = {
      border: "0px",
      fontSize: "14px",
      borderRadius: "5px",
      padding: "0px",
      height: "18px",
      marginRight: "25px",
      marginLeft: "5px"
    };
    return (
      <Row
        type={"flex"}
        justify={"start"}
        className={classes.contantMargin}
        gutter={2}
        align={"middle"}
      >
        <Col span={21}>
          <span style={{ marginRight: "25px" }}>
            {this.props.filterTitle + ":"}
          </span>
          <Radio.Group
            onChange={this.filtrateDo}
            buttonStyle="solid"
            size={"small"}
            value={this.state.filterValue}
          >
            {this.props.filterParam.map((value, index) => {
              return (
                <Radio.Button key={index} style={radioCss} value={value.name}>
                  {value.name}
                </Radio.Button>
              );
            })}
          </Radio.Group>
          {this.tagState(this.state.tag)}
        </Col>
      </Row>
    );
  }
}

export default withStyles(styles)(FilterHurdle);
